<template>
  <div class="card-container">
    <el-table
        :data="StatusTable.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        stripe style="width: 100%;font-size: 20px"
        size="large"
    >
      <el-table-column prop="runID" label="运行编号" width="180" />
      <el-table-column prop="uid" label="用户名" width="180" />
      <el-table-column prop="pid" label="题号" width="180" />
      <el-table-column prop="submitTime" label="提交时间" width="180" />
      <el-table-column label="查看代码" width="180">
        <template v-slot="scope">
          <router-link :to="{path: '/ProblemDetail', query:{pid: scope.row.pid, cid: cidId, rid: scope.row.runID} }">点击查看</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="提交结果" width="180" />
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="StatusTable.length"
    />
  </div>
</template>

<script>

import api from "../api/api.js";

export default {
  name: "Status",
  data() {
    return {
      StatusTable: [],
      index: 1,
      currentPage: 1, // 初始页
      pagesize: 5 // 每页的数据
    }
  },
  created() {
    this.handleStatusTable();
  },
  mounted() {

  },
  methods: {
    // 初始页currentPage, 初始每页数据数pagesize 和 数据data  (为了方便就不使用数据库limit进行处理了)
    handleSizeChange (size) {
      console.log(size, 'size');
      this.pagesize = size;
      console.log(this.pagesize); // 每页下拉显示数据
    },
    handleCurrentChange (currentPage)
    {
      console.log(currentPage,'currentPage');
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    handleStatusTable() {
      // 全局提交状态
      if (this.cidId == '-1')
      {
        api
            .GetStatus()
            .then((res) => {
                for (var i = 0; i < res.data.length; i++)
                {
                  this.StatusTable.push({
                      runID: res.data[i].runID,
                      uid: res.data[i].uid,
                      pid: res.data[i].pid,
                      submitTime: res.data[i].submitTime,
                      status: res.data[i].status
                  })
                }
            })

      }
      else // 比赛提交状态
      {
        api
          .GetCidStatusList(this.cidId)
          .then((res) => {
            for (var i = 0; i < res.data.length; i++)
            {
              this.StatusTable.push({
                runID: res.data[i].runID,
                uid: res.data[i].uid,
                pid: res.data[i].pid,
                submitTime: res.data[i].submitTime,
                status: res.data[i].status
              });
            }
          })
      }
    }
  },
  props: {
    cidId: {
      type: String,
      required: false, // 标记是否从比赛页面跳转过来的题目,如果是的话后续传参需要插入到比赛的Status
      default: '-1'
    }
  }
}
</script>

<style lang="scss" scoped>

@import '../_utility.scss';

.card-container {
  @include basic-card;
  margin-top: 20px;
}

.el-pagination:deep {
  margin-top: 20px;
}

.el-pagination:deep .el-pager .number {
  font-size: 20px;
}

</style>
